import React, { PureComponent } from 'react';
import { Form, Icon, Input, Button, Checkbox, Upload, message } from 'antd';
import { SelectCategory } from '../../components/SelectCategory';
import { util } from '../../common/util';
import { resolve } from 'url';
const FormItem = Form.Item;



@Form.create()
export class Edit extends PureComponent {
    state = {
        loading: false,
        imageUrl: ''
    }

    constructor(props) {
        super(props);
    }

    componentWillReceiveProps(nextProps) {

    }

    saveForm = (formdata) => {
        let { callback } = this.props;
        if (typeof (callback) == 'function') {
            callback(formdata);
        }
    }

    normFile = (e) => {
        console.log('Upload event:', e);
        if (Array.isArray(e)) {
            return e;
        }
        return e && e.fileList;
    }

    before = (file) => {
        util.beforeUpload(file, (imageUrl) => {
            this.setState({
                imageUrl: `${imageUrl}`
            })
        })
    }

    getUploadData = (e) => {
        console.log('Upload event:', e);
        let { imageUrl } = this.state;
        if (imageUrl) {
            return imageUrl;
        } else {
            return null;
        }
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                this.saveForm(values);
            }
        });
    }

    render() {
        const { item } = this.props;
        const { imageUrl } = this.state;
        const { getFieldDecorator } = this.props.form;
        const showImage = () => {

        }
        const uploadButton = (
            <div>
                <Icon type={this.state.loading ? 'loading' : 'plus'} />
                <div className="ant-upload-text">Upload</div>
            </div>
        );
        return (
            <Form onSubmit={this.handleSubmit} className="login-form">
                <FormItem
                    label="父级分类:"
                >
                    {getFieldDecorator('name', {
                        initialValue: item.name,
                        rules: [{ required: true, message: 'Please input your username!' }],
                    })(
                        <SelectCategory></SelectCategory>
                    )}
                </FormItem>
                <FormItem
                    label="名称:"
                >
                    {getFieldDecorator('name', {
                        initialValue: item.name,
                        rules: [{ required: true, message: 'Please input your username!' }],
                    })(
                        <Input placeholder="名称" />
                    )}
                </FormItem>
                <FormItem>
                    {getFieldDecorator('bigimg', {
                        initialValue: imageUrl,
                        getValueFromEvent: this.getUploadData,
                        rules: [{ required: true, message: '请上传图片!' }]
                    })(
                        <Upload
                            name="avatar"
                            action="/api/uploadImage"
                            listType="picture-card"
                            showUploadList={false}

                            beforeUpload={this.before}
                            onChange={this.handleChange}
                        >
                            {imageUrl ? <img src={imageUrl} alt="" width='70' /> : uploadButton}
                        </Upload>
                    )}
                </FormItem>
                <FormItem
                    label="描述:"
                >
                    {getFieldDecorator('summary', {
                        rules: [{ required: true, message: 'Please input your Password!' }],
                    })(
                        <Input type="password" placeholder="描述" />
                    )}
                </FormItem>
                <FormItem>
                    {getFieldDecorator('isshow', {
                        valuePropName: 'checked',
                        initialValue: true,
                    })(
                        <Checkbox>展示</Checkbox>
                    )}
                </FormItem>
                <FormItem>
                    <Button type="primary" htmlType="submit" className="login-form-button">
                        保存
                              </Button>
                </FormItem>
            </Form>
        );
    }
}
